<template>
	<div class="qopSon">
		<div id="warn-echart"></div>
		<!-- <div class="indexCom_top zdLeixin clear_float">
			 <div v-for="(item , index) of select" :class="item.sel ? 'active_leixin' : '' " ref="liveWarn" :key="index"  @click="selectType(index,item.sel)">
				<span class="check_box"></span>
				<span>{{index}}</span>
				<i v-if="item.num!=''">{{item.num}}</i>
			</div>
		</div> -->

		<!-- <div class="warn_cons">
			<table>
				<tr>
					<td>序号</td> <td>测站号</td> <td>乡镇</td> <td>预警类型</td> <td>预警信息</td>
				</tr>
				<tr v-for="(item , index) of endWarn" :key="index">
					<td>{{index}}</td>
					<td v-for="(item2 , index2) of item" :key="index2">
						{{item2}}
					</td>
				</tr>
			</table>
		</div> -->
	</div>
</template>

<script>
import topTitle from './top'
import echarts from 'echarts'
export default {
  props:["msg"],
	components: {
      topTitle,
  },
	data() {
		return {
			title:{
				name: "实况预警信息",
				time: "",
			},
			select:{
				"全部":{sel:true,num:"3"},"1小时降水":{sel:true,num:"2"},"3小时降水":{sel:true,num:""},"6小时降水":{sel:true,num:""},"雷雨大风":{sel:true,num:""},"台风":{sel:true,num:""},
				"高温干旱":{sel:true,num:"1"},"雨雪冰冻":{sel:true,num:""},"超警戒水位":{sel:true,num:""},
			},
			warn:[
				{StationName:"腊口镇",StationNum:"K9231",type:"1小时降水",warn:"fgnmk,lmlnounou"},
				{StationName:"腊口镇",StationNum:"K9231",type:"1小时降水",warn:"fgnmk,lmlnounou"},
				{StationName:"腊口镇",StationNum:"K9231",type:"高温干旱",warn:"fgnmk,lmlnounou"},
				{StationName:"腊口镇",StationNum:"K9231",type:"雷雨大风",warn:"fgnmk,lmlnounou"},
				{StationName:"腊口镇",StationNum:"K9231",type:"雷雨大风",warn:"fgnmk,lmlnounou"},
			],
			endWarn:[],
		}
	},
	methods:{
		refreshAll(){

		},
    closeThis(){
        this.$emit('closep',this.msg.name);
    },
		selectType(index,item){
			this.select[index].sel=!item;
			var i;
			if(index=="全部"&&this.select[index].sel){
				for(i in this.select){
					this.select[i].sel=true;
				}
			};
			this.fiterWarn();
		},
		fiterWarn(){
			var arr=[];
			this.endWarn=[];
			for(i in this.select){
				if(this.select[i].sel){
					arr.push(i);
				}
			};
			for(var i=0;i<this.warn.length;i++){
				for(var y=0;y<arr.length;y++){
					if(this.warn[i].type==arr[y]){
						this.endWarn.push(this.warn[i]);
					}
				}
			};
		},
		doEchart(data){
			// var data=json.DS.R;
			// var x=[];
			// var y1=[];
			// var y2=[];
			// var y3=[];
			// var length=data.length>10?10:data.length;
			// data=data.sort(this.compare('WIN_S_Inst_Max'));
			// for(var i=0;i<length;i++){
			// 	x.push(data[i].Station_name);
			// 	y1.push(data[i].WIN_S_Inst_Max);
			// 	for(var u=0;u<this.windS.length;u++){
			// 		if(data[i].WIN_S_Inst_Max<this.windS[u][0]){
			// 			data[i].ji=this.windS[u][1];
			// 			break;
			// 		}
			// 	};
			// 	y2.push(data[i].ji.replace("级",""));
			// 	y3.push(data[i].observtimes.slice(0,16));
			// };
			// this.refreshEchartHeight();
			this.charts = echarts.init(document.getElementById("warn-echart"));
			this.charts.setOption({
				xAxis: {
				  type: 'category',
				  show:true,
				  data: ['1小时降水', '6小时降水', '7级大风', '8级大风', '9级大风', '<1000米大雾', '<500米大雾','超警戒水位','ACI>100'],
				  axisLabel: {
						interval:0,
						rotate:315
					}
				},
				grid: {
	        left: '0%',
	        right: '0%',
	        bottom: '8%',
	        top:"20%",
	        containLabel: true
    		},

				yAxis: {
				  type: 'value',
				  show:true
				},
				series: [{
					  data: [0, 0, 0, 0, 0, 0, 0,0, 0],
					  type: 'bar',
					  color: '#37BAF2',
					  label: {
	                normal: {
	                    show: true,
	                    position: 'top'
	                }
	            }

						}
				]
			})
		},

  },
	mounted(){
		this.doEchart()
		this.$emit('refreshTop',this.title);
		this.fiterWarn();
		this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/RainByYuJin",}).then((res)=>{
			// //console.log(res)
			var _data=res.data.DS;
			this.title.time=_data.time;

			for(var i in _data){
				for(var j=0;j<_data[i].length;j++){
					// _data[i][j].
					this.warn.push(_data[i][j]);
				}
			}
		})
		.catch(function(err){
			//console.log(err)
		})
	}
}
</script>

<style lang="less" scoped="scoped">

	#warn-echart{
		width: 100%;
		height: 100%;

	}
	.qopSon{
		position:absolute;
		top: 50px;
		left: 0px;
		right: 0px;
		bottom:0px;
	}
	.zdLeixin{
		padding: 6px 6px 4px;
		cursor: pointer;
		&>div{
			position: relative;
			padding:6px 15px;
			&:hover span{
				// color: #89dbf5;
			}
			float: left;
			span{
				color: #fff;
			}
			i{
				position: absolute;
				right: 4px;
				top: 1px;
				text-align: center;
				line-height: 12px;
				border-radius: 50%;
				min-width: 12px;
				padding: 0 3px;
				height: 12px;
				font-size: 12px;
				color: #fff;
				background: #D54186;
			}
			.check_box{
				display: inline-block;
				width: 8px;
				height: 8px;
				border: 1px solid #89dbf5;
			}

		}
		.active_leixin{
			.check_box{
				background: #89dbf5;
			}
			span{
				color: #89dbf5;
			}
		}

	}
	.warn_cons{
		padding: 10px 0px;
		border-top: 2px solid rgba(255, 255, 255, 0.4);
		table{
			width: 100%;
			border-collapse: collapse;
		}
		tr{
			padding: 0 15px;
			&:nth-child(2n){
				background: rgba(255, 255, 255, 0.1);
			}
			td{
				padding: 14px 5px;
				&:first-child{
					padding-left: 20px;
				}
			}
		}
	}
</style>
